<template>
  <div class="admin-box">
    <h2>管理员列表</h2>
    <el-scrollbar ref="scrollbarRef" always>
      <el-button type="primary" @click="showAddBox">添加管理员</el-button>
      <add-admin v-model="drawer" @close-drawer="closeDrawer"></add-admin>
      <!-- 管理员列表 -->
      <el-table style="width: 100%" :data="adminLists">
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column prop="adminname" label="账号" width="180" />
        <el-table-column label="权限" width="280">
          <template #default="scope">
            <span>{{ scope.row.role == "2" ? "超级管理员" : "管理员" }}</span>
          </template> </el-table-column>
        <el-table-column label="操作">
          <!-- <template> -->
            
          <!-- </template> -->
          <template #default="scope">
            <el-button type="danger" @click="removeById(scope.row.adminid)">删除</el-button>
            <el-button >编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-scrollbar>
    <div class="demo-pagination-block">
      <div class="demonstration"></div>
      <el-pagination
        v-model:currentPage="pageIndex"
        v-model:page-size="pageCount"
        :page-sizes="[5, 10, 15, 20]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="总页数, sizes, prev, pager, next, jumper"
        :total="adminList.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { getAdminListApi, removeAdminApi } from "@/api/admin";
import { computed, onMounted, ref } from "vue";
import type { Ref } from "vue";
import addAdmin from "./addAdmin.vue"
import { ElMessageBox } from "element-plus";

/* 展示drawer */
const drawer = ref(false);
let showAddBox = ()=>{
  drawer.value = true;
}
let closeDrawer = ()=>{
  drawer.value = false;
  getAdminList();
}


/* 分页器 */
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const handleSizeChange = (val: number) => {
  // console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  // console.log(`current page: ${val}`);
};
// 每页的条数
let pageCount = ref(5);
// 当前页码
let pageIndex = ref(1);

interface Iadmin {
  adminname: string;
  role: 2;
  adminid: string;
}
let adminList: Ref<Array<Iadmin>> = ref<Array<Iadmin>>([]);

function getAdminList(){
  getAdminListApi().then((res: any) => {
    if (res.code == "200") {
      adminList.value = res.data;
      // console.log("adminList", adminList.value);
    }
  });
}
onMounted(() => {
 return getAdminList()
});

let adminLists = computed(() => {
  return adminList.value.slice(
    (pageIndex.value - 1) * pageCount.value,
    pageIndex.value * pageCount.value
  );
});
// console.log("adminLists",adminLists);

/* 删除按钮 */
function removeById(id:string) {
// console.log("按删除");
  removeAdminApi({adminid:id})
  .then((res:any)=>{
    if(res.code == "200"){
      ElMessageBox({
              title: "提示",
              message: "删除成功!",
            })
            getAdminList();
    } else {
      ElMessageBox({
              title: "提示",
              message: "删除失败!",
            })
    }
   
    
  })
}

/* 点击编辑 */
function editById() {}



</script>

<style>
</style>